<template>
  <div class="svgPie">
 
  </div>
</template>
 
<script>
import * as d3 from 'd3'
export default {
  name: 'svgPie',
  data () {
    return {
      id:''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let margin = { top: 0, right: 60, bottom: 60, left: 0 },
        width = 300,
        height = 300;

      let svg = d3.select('.svgPie')
        .append('svg')
        .attr("width", width)
        .attr("height", height)
        .attr("id", "tt")

			let g = svg.append('g')
        .attr('transform', 'translate('+ margin.top +', '+ margin.left +')')
        
      let dataset = [25, 15, 33, 68, 18]

      // 一个颜色比例尺
			let colorScale = d3.scaleOrdinal()
				.domain(d3.range(dataset.length))
        .range(d3.schemeCategory10);
      // console.log(colorScale(1))
       
      let pie = d3.pie()
      let innerRadius = 0, // 50 内半径 控制 -> 环形 
          outerRadius = 80,
          oiRadius = 100,
          otRadius = 140
      let arcGenerator = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)
      let ringGenerator = d3.arc().innerRadius(oiRadius).outerRadius(otRadius)

      let pieData = pie(dataset)

      var gs = g.selectAll('.g')
				.data(pieData)
				.enter()
				.append('g')
				.attr('transform', 'translate('+ width / 2 +', '+ height / 2 +')')

			// 绘制扇形
			gs.append('path')
				.attr('d', (d) => arcGenerator(d))
				.attr('fill', (d, i) => {
					return colorScale(i);   // 设置颜色
        })

      gs.append('path')
        .attr('d', (d) => ringGenerator(d))
        .attr('fill', (d, i) => colorScale(i))
        // .attr('fill', (d, i) => colorScale(i+1))
			// 添加文字
			gs.append('text')
				.attr('transform', (d) => {
					return 'translate('+ arcGenerator.centroid(d) +')';    // 中心位置
				})
				.attr('text-anchor', 'middle')
				.attr('fill', '#eee')
				.text((d) => d.data)

    }
  }
}
</script>
 
<style scoped lang="less">
 
</style>